<!--
 * @Author: xuxu12138 1718324422@qq.com
 * @Date: 2023-09-04 08:44:58
 * @LastEditors: xuxu12138 1718324422@qq.com
 * @LastEditTime: 2024-08-08 10:35:02
 * @FilePath: /things-admin/src/view/dataScreen/components/footer/footer_left.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
  <div class="content">
    <div class="header">
      <div class="title">程序信息</div>
      <img src="../../images/997.png" alt="" class="cope" @click.stop="cope" />
    </div>
    <div class="echarts">
      <div id="echarts_sixteen"></div>
      <div id="echarts_seventeen"></div>
    </div>
    <div class="isMask" v-show="isMask"></div>
    <div class="tanchuang" v-show="isMask">
      <div class="header">
        <div class="title">程序信息</div>
        <div class="el-icon-circle-close" @click.stop="cope"></div>
      </div>
      <div class="echart">
        <div id="echarts_sixteen_copy"></div>
        <div id="echarts_seventeen_copy"></div>
      </div>
    </div>
  </div>
</template>

<script>
import * as echarts from "echarts";
import {
  downloadProgramStatistics,
  modelMassageStatistics
} from "@/base/api/DataScreen.ts";
export default {
  data() {
    return {
      data_one: [],
      data_two: [],
      data_one_copy: [],
      data_two_copy: [],
      provinceId: this.provinceId || "",
      cityId: this.cityId || "",
      name: this.name || "",
      isMask: false,
      countArr: [],
      xinghaoArr: [],
      countArr_copy: [],
      xinghaoArr_copy: []
    };
  },
  props: ["provinceId", "cityId", "name"],
  watch: {
    provinceId1(newval) {
      this.provinceId1 = newval;
    },
    cityId1(newval) {
      this.cityId1 = newval;
    },
    name(newval) {
      if (newval) {
        this.name = newval;
        this.downloadProgramStatistics();
      }
    }
  },
  methods: {
    //复制信息
    cope() {
      this.isMask = !this.isMask;
    },
    echartsSixteen() {
      let myChartSixteen = echarts.init(
        document.getElementById("echarts_sixteen", null, { renderer: "svg" })
      );
      var option = {
        grid: {
          left: "10%", // 距离容器左侧的距离
          right: "0%", // 距离容器右侧的距离
          top: "20%", // 距离容器顶部的距离
          bottom: "12%", // 距离容器底部的距离
          containLabel: true
        },
        tooltip: {
          trigger: "item"
        },
        xAxis: {
          name: "热门\n程序",
          nameLocation: "start",
          nameGap: 0,
          data: this.data_one,
          axisLine: {
            show: false
          },
          axisTick: {
            show: false
          },
          axisLabel: {
            interval: 0, // 强制显示所有标签
            // margin:5,
            textStyle: {
              color: "#FFFFFF", // 设置x轴标签字体颜色
              fontSize: 10
            }
          },
          nameTextStyle: {
            color: "#60D4FF", // 设置x轴名称的颜色为#333
            fontSize: 10, // 设置x轴名称的字体大小为16
            fontWeight: "bold", // 设置x轴名称的字体粗细为粗体
            align: "right",
            verticalAlign: "top"
          }
        },
        yAxis: {
          name: "下载\n次数",
          nameGap: -20,
          nameLocation: "end",
          axisLine: {
            show: false // 隐藏y轴轴线
          },
          axisTick: {
            show: false
          },
          axisLabel: {
            show: false
          },
          splitLine: {
            show: false // 隐藏y轴分隔线
          },
          nameTextStyle: {
            color: "#60D4FF", // 设置x轴名称的颜色为#333
            fontSize: 10, // 设置x轴名称的字体大小为16
            fontWeight: "bold", // 设置x轴名称的字体粗细为粗体
            align: "right"
          }
        },
        series: [
          {
            type: "bar",
            data: this.data_two,
            label: {
              show: true, // 显示标签
              position: "top", // 标签位置
              color: "#FFFFFF",
              fontSize: 10
            },
            itemStyle: {
              normal: {
                //柱状图渐变色设置
                color: function(params) {
                  var colorList = [
                    new echarts.graphic.LinearGradient(0, 0, 1, 1, [
                      { offset: 0, color: "#00C9FF" },
                      { offset: 1, color: "rgba(0,201,255,0)" }
                    ])
                  ];
                  return colorList[params.dataIndex % colorList.length];
                },
                borderColor: "#00A5FF", // 设置柱子边框颜色为红色
                borderWidth: 1 // 设置柱子边框宽度为2
              }
            },
            barWidth: "20%" //柱子的宽度
          }
        ]
      };
      myChartSixteen.setOption(option);
    },
    echartsSeventeen() {
      let myChartSeventeen = echarts.init(
        document.getElementById("echarts_seventeen", null, { renderer: "svg" })
      );
      let option = {
        tooltip: {
          trigger: "axis"
        },
        color: ["#2257CE", "#EC5987", "#00C7FC"],
        legend: {
          icon: "circle",
          itemWidth: 7,
          itemHeight: 7,
          itemGap: 3.5,
          top: 10,
          right: 45,
          textStyle: {
            color: "#FFF",
            fontSize: 10,
            fontWeight: "bold"
          },
          data: ["模式次数"]
        },
        grid: {
          left: "15%",
          right: "4%",
          bottom: "3%",
          top: "18%",
          containLabel: true
        },
        xAxis: {
          name: "型号",
          nameGap: 20,
          nameLocation: "start",
          type: "category",
          boundaryGap: false,
          data: this.xinghaoArr,
          nameTextStyle: {
            color: "#60D4FF", // 设置x轴名称的颜色为#333
            fontSize: 9, // 设置x轴名称的字体大小为16
            fontWeight: "bold", // 设置x轴名称的字体粗细为粗体
            align: "right",
            verticalAlign: "top"
          },

          axisTick: {
            show: false
          },
          axisLabel: {
            interval: 0, // 强制显示所有标签
            // margin:5,
            textStyle: {
              color: "#FFFFFF", // 设置x轴标签字体颜色
              fontSize: 10
            }
          }
        },
        yAxis: {
          name: "累计",
          nameLocation: "end",
          nameGap: 5, // 调节名称与轴线的距离
          type: "value",
          position: "right",
          axisLabel: {
            interval: 0, // 强制显示所有标签
            textStyle: {
              color: "#FFFFFF", // 设置x轴标签字体颜色
              fontSize: 10
            }
          },
          nameTextStyle: {
            color: "#60D4FF", // 设置x轴名称的颜色为#333
            fontSize: 9, // 设置x轴名称的字体大小为16
            fontWeight: "bold", // 设置x轴名称的字体粗细为粗体
            align: "right",
            verticalAlign: "top"
          },
          splitLine: {
            show: false // 隐藏y轴分隔线
          },
          axisTick: {
            show: false
          }
        },
        series: [
          {
            name: "模式次数",
            type: "line",
            stack: "Total",
            symbol: "circle",
            data: this.countArr
          }
        ]
      };
      myChartSeventeen.setOption(option);
    },
    echartsSixteenCopy() {
      let myChartSixteen = echarts.init(
        document.getElementById("echarts_sixteen_copy", null, {
          renderer: "svg"
        })
      );
      var option = {
        grid: {
          left: "10%", // 距离容器左侧的距离
          right: "0%", // 距离容器右侧的距离
          top: "20%", // 距离容器顶部的距离
          bottom: "12%", // 距离容器底部的距离
          containLabel: true
        },
        tooltip: {
          trigger: "item",
          textStyle: {
            fontSize: 18,
            fontWeight: "bold"
          }
        },
        xAxis: {
          name: "热门\n程序",
          nameLocation: "start",
          nameGap: 0,
          data: this.data_one_copy,
          axisLine: {
            show: false
          },
          axisTick: {
            show: false
          },
          axisLabel: {
            interval: 0, // 强制显示所有标签
            // margin:5,
            textStyle: {
              color: "#FFFFFF", // 设置x轴标签字体颜色
              fontSize: 16
            }
          },
          nameTextStyle: {
            color: "#60D4FF", // 设置x轴名称的颜色为#333
            fontSize: 16, // 设置x轴名称的字体大小为16
            fontWeight: "bold", // 设置x轴名称的字体粗细为粗体
            align: "right",
            verticalAlign: "top"
          }
        },
        yAxis: {
          name: "下载\n次数",
          nameGap: -20,
          nameLocation: "end",
          axisLine: {
            show: false // 隐藏y轴轴线
          },
          axisTick: {
            show: false
          },
          axisLabel: {
            show: false
          },
          splitLine: {
            show: false // 隐藏y轴分隔线
          },
          nameTextStyle: {
            color: "#60D4FF", // 设置x轴名称的颜色为#333
            fontSize: 16, // 设置x轴名称的字体大小为16
            fontWeight: "bold", // 设置x轴名称的字体粗细为粗体
            align: "right"
          }
        },
        series: [
          {
            type: "bar",
            data: this.data_two_copy,
            label: {
              show: true, // 显示标签
              position: "top", // 标签位置
              color: "#FFFFFF",
              fontSize: 20
            },
            itemStyle: {
              normal: {
                //柱状图渐变色设置
                color: function(params) {
                  var colorList = [
                    new echarts.graphic.LinearGradient(0, 0, 1, 1, [
                      { offset: 0, color: "#00C9FF" },
                      { offset: 1, color: "rgba(0,201,255,0)" }
                    ])
                  ];
                  return colorList[params.dataIndex % colorList.length];
                },
                borderColor: "#00A5FF", // 设置柱子边框颜色为红色
                borderWidth: 1 // 设置柱子边框宽度为2
              }
            },
            barWidth: "20%" //柱子的宽度
          }
        ]
      };
      myChartSixteen.setOption(option);
    },
    echartsSeventeenCopy() {
      let myChartSeventeen = echarts.init(
        document.getElementById("echarts_seventeen_copy", null, {
          renderer: "svg"
        })
      );
      let option = {
        tooltip: {
          trigger: "axis",
          textStyle: {
            fontSize: 18,
            fontWeight: "bold"
          }
        },
        color: ["#2257CE"],
        legend: {
          icon: "circle",
          itemWidth: 7,
          itemHeight: 7,
          itemGap: 3.5,
          top: 10,
          right: 245,
          textStyle: {
            color: "#FFF",
            fontSize: 20,
            fontWeight: "bold"
          },
          data: ["模式次数"]
        },
        grid: {
          left: "15%",
          right: "4%",
          bottom: "3%",
          top: "18%",
          containLabel: true
        },
        xAxis: {
          name: "型号",
          nameGap: 20,
          nameLocation: "start",
          type: "category",
          boundaryGap: false,
          data: this.xinghaoArr_copy,
          nameTextStyle: {
            color: "#60D4FF", // 设置x轴名称的颜色为#333
            fontSize: 16, // 设置x轴名称的字体大小为16
            fontWeight: "bold", // 设置x轴名称的字体粗细为粗体
            align: "right",
            verticalAlign: "top"
          },

          axisTick: {
            show: false
          },
          axisLabel: {
            interval: 0, // 强制显示所有标签
            // margin:5,
            textStyle: {
              color: "#FFFFFF", // 设置x轴标签字体颜色
              fontSize: 20
            }
          }
        },
        yAxis: {
          name: "累计",
          nameLocation: "end",
          nameGap: 5, // 调节名称与轴线的距离
          type: "value",
          position: "right",
          axisLabel: {
            interval: 0, // 强制显示所有标签
            textStyle: {
              color: "#FFFFFF", // 设置x轴标签字体颜色
              fontSize: 20
            }
          },
          nameTextStyle: {
            color: "#60D4FF", // 设置x轴名称的颜色为#333
            fontSize: 16, // 设置x轴名称的字体大小为16
            fontWeight: "bold", // 设置x轴名称的字体粗细为粗体
            align: "right",
            verticalAlign: "top"
          },
          splitLine: {
            show: false // 隐藏y轴分隔线
          },
          axisTick: {
            show: false
          }
        },
        series: [
          {
            name: "模式次数",
            type: "line",
            stack: "Total",
            symbol: "circle",
            data: this.countArr_copy
          }
        ]
      };
      myChartSeventeen.setOption(option);
    },
    //在线程序下载数据接口
    downloadProgramStatistics() {
      downloadProgramStatistics(this.provinceId, this.cityId).then(res => {
        this.data_one = [];
        this.data_two = [];
        this.data_one_copy = [];
        this.data_two_copy = [];
        res.data.forEach((item, index) => {
          if (index <= 7) {
            this.data_one.push(item.mode_name);
            this.data_two.push(item.downloads);
          }
          if (item.mode_name.length >= 2) {
            this.data_one_copy.push(item.mode_name);
            this.data_two_copy.push(item.downloads);
          }
        });
        this.echartsSixteen();
        this.echartsSixteenCopy();
      });
    },
    modelMassageStatistics() {
      modelMassageStatistics(this.provinceId, this.cityId).then(res => {
        this.countArr = [];
        this.xinghaoArr = [];
        this.countArr_copy = [];
        this.xinghaoArr_copy = [];
        res.data.forEach((item, index) => {
          if (index < 12) {
            this.countArr.push(item.count);
            this.xinghaoArr.push(item.modelName);
          }
          this.countArr_copy.push(item.count);
          this.xinghaoArr_copy.push(item.modelName);
        });
        this.echartsSeventeen();
        this.echartsSeventeenCopy();
      });
    }
  },
  mounted() {
    this.modelMassageStatistics();
    this.downloadProgramStatistics();
  }
  // computed:{
  //   provinceId(){
  //     return
  //   },
  //   cityId(){
  //     return sessionStorage.getItem('cityId')
  //   }
  // },
};
</script>
<style lang="less" scoped>
.content {
  width: 900.5px;
  height: 256px;
  background: url(../../images/3459.png) no-repeat;
  background-size: cover;
  .header {
    width: 900.5px;
    height: 46px;
    display: flex;
    align-items: center;
    .title {
      width: 80px;
      height: 29px;
      font-size: 20px;
      font-weight: 500;
      color: #ffffff;
      line-height: 29px;
      margin: 0 764.5px 0 21px;
    }
    .cope {
      width: 20px;
      height: 20px;
      cursor: pointer;
    }
  }
  .echarts {
    width: 900.5px;
    height: 210px;
    display: flex;
    #echarts_sixteen {
      width: 450px;
      height: 210px;
      //   background-color: #fff;
    }
    #echarts_seventeen {
      width: 450px;
      height: 210px;
      // background-color: #fff;
      // background-color: #fff;
    }
  }
  .isMask {
    position: fixed;
    z-index: 99999998;
    width: 100%;
    height: 100%;
    top: 0%;
    left: 0%;
    background-color: rgba(0, 0, 0, 0.3);
  }
  .tanchuang {
    position: fixed;
    z-index: 99999999;
    width: 70%;
    height: 70%;
    top: 15%;
    left: 15%;
    background-color: #0a1632;
    .header {
      width: 100%;
      height: 46px;
      display: flex;
      align-items: center;
      background: url(../../images/3459.png) no-repeat;
      background-size: cover;
      justify-content: space-between;
      .title {
        width: 80px;
        height: 29px;
        font-size: 20px;
        font-weight: 500;
        color: #ffffff;
        line-height: 29px;
        margin: 0 764.5px 0 21px;
      }
      div {
        width: 20px;
        height: 20px;
        cursor: pointer;
        font-size: 24px;
        color: #ffffff;
        margin-right: 20px;
      }
    }
    .echart {
      width: 100%;
      height: 93%;
      overflow-x: auto;
      overflow-y: hidden;
      #echarts_sixteen_copy {
        width: 4800px;
        height: 310px;
        margin-left: -400px;
        //   background-color: #fff;
      }
      #echarts_seventeen_copy {
        width: 4800px;
        height: 310px;
        margin-left: -600px;
        // background-color: #fff;
      }
    }
  }
}
</style>
